<template>
	<view class='content' v-if="show">
		<image class='cloud' src="/static/cloud.png"></image>
		<image class='cloud2' src="/static/cloud2.png"></image>
		<view class='userinfo flex'>
			<image class='avatar' src="/static/defaultavatar.jpg"></image>
			<view class='userdata'>
				{{mem.mobile}}
				<view class='userid flex'>推荐码: <text @click="onCopy(mem.code)">{{mem.code}}</text><view class='userlevel'>{{mem.leveltitle}}</view></view>
			</view>
			<view class='usericon' @click="onServer" v-if="server">
				<image src="/static/user_server.png"></image>
				客服
			</view>
		</view>
		<view class='upview' v-if="mem.canup">
			<image class='upbg' mode="widthFix" src="/static/upbg.png"></image>
			<view class='uptxt flex'>
				<view class='uptext'>升级代理享受更多权益</view>
				<view class='upbtn flex' @click="onPage('level')">
					<image src='/static/upbtn.png'></image>
					<text>立即升级</text>
				</view>
			</view>
		</view>
		<view class='creditview'>
			<image class='creditbg' mode="widthFix" src="/static/creditbg.png"></image>
			<view class='creditinfo flex'>
				<view class='credit'>
					<view class='flex credittip'><image src="/static/crediticon.png"></image> 账户余额</view>
					￥{{mem.credit}}
				</view>
				<uv-button @click="onPage('log')" style="margin-left: auto;width: 160rpx;" shape="circle" text="明细" plain color="white" :custom-style='{background: "transparent"}' :custom-text-style="{fontSize:'30rpx'}"></uv-button>
				<uv-button @click="onPage('recharge')" style="margin-left: 20rpx;width: 160rpx;" shape="circle" text="去充值" color="white" :custom-text-style="{color:'#2A89F8',fontWeight:'bold',fontSize:'30rpx'}"></uv-button>
			</view>
		</view>
		<view class='card'>
			<view class='cardtitle flex'>我的收益 <navigator url="/pages/agent/stat" class='money flex'>查看明细<uv-icon name="arrow-right"></uv-icon></navigator></view>
			<view class='statview flex'>
				<view class='statitem'>
					<text>{{order.nowith}}</text>
					未结算(元)
				</view>
				<view class='statitem'>
					<text>{{order.canwith}}</text>
					可提现(元)
				</view>
				<view class='statitem'>
					<text>{{order.all}}</text>
					累积收益(元)
				</view>
			</view>
		</view>
		<view class='qrview' @click="onPage('shop')">
			<image src="/static/qrbanner.png" mode="widthFix"></image>
			<view class='qrtxt'>我的店铺分享</view>
		</view>
		<view class='card'>
			<view class='cardtitle'>更多功能</view>
			<view class='menuview'>
				<navigator class='menuitem' url="/pages/agent/order">
					<image src="/static/menu_order.png"></image>
					我的订单
				</navigator>
				<navigator class='menuitem' url="/pages/agent/log">
					<image src="/static/menu_recharge.png"></image>
					充值记录
				</navigator>
				<navigator class='menuitem' url="/pages/agent/team">
					<image src="/static/menu_report.png"></image>
					我的推广
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				show:false,
				mem:false,
				order:false,
				server:false
			}
		},
		onShow(options) {
			var t = this;
			this.util.post('agent',{},(r)=>{
				t.show = true;
				t.order = r.order;
				t.mem = r.mem;
				if(r.url) t.server = r.url;
			})
		},
		methods: {
			onCopy(txt){
				uni.setClipboardData({
					data:txt
				})
			},
			onPage(page){
				uni.navigateTo({
					url:'/pages/agent/'+page
				})
			},
			onServer(){
				uni.previewImage({
					urls:[this.server]
				})
			},
			onLogOut(){
				var t = this;
				uni.showModal({
					title:'温馨提示',
					content:'确认退出登录吗？',
					success(r) {
						if(r.confirm){
							t.util.post('agent/logout',{},(r)=>{
								uni.showToast({
									title:'退出成功'
								})
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/agent/login'
									})
								},1000)
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background: #f4f5f9;
		height: 100vh;
		padding: 60rpx 30rpx 30rpx;
		.card{margin: 20rpx 0;}
		.userinfo{
			margin-bottom: 50rpx;
			.avatar{
				border: 1px solid white;
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}
			.userdata{
				font-size: 36rpx;
				font-weight: bold;
				.userid{
					font-size: 28rpx;
					color: gray;
					margin-top: 10rpx;
				}
				.userlevel{
					margin-left: 10rpx;
					background: #FFDA93;
					color: #4F1F04;
					border-radius: 8rpx;
					font-size: 24rpx;
					padding: 4rpx 10rpx;
				}
			}
			.usericon{
				margin-left: auto;
				font-size: 28rpx;
				image{
					margin: 0 auto 10rpx;
					width: 44rpx;
					height: 44rpx;
					display: block;
				}
			}
		}
		.cloud{
			position: absolute;
			width: 366rpx;
			height: 298rpx;
			right: -40rpx;
			top: -30rpx;
		}
		.cloud2{
			position: absolute;
			width: 216rpx;
			height: 177rpx;
			left: -40rpx;
			top: 80rpx;
		}
		.upview{
			position: relative;
			margin-bottom: -30rpx;
			.upbg{
				width: 100%;
			}
			.uptxt{
				position: absolute;
				top: 0;
				justify-content: space-between;
				width: 100%;
				padding: 20rpx 30rpx 0;
				.uptext{
					font-size: 36rpx;
					color: #FCE2AF;
				}
				.upbtn{
					width: 160rpx;
					height: 60rpx;
					position: relative;
					justify-content: center;
					image{
						position: absolute;
						width: 100%;
						top: 0;
						left: 0;
						height: 100%;
					}
					text{
						position: relative;
						z-index: 1;
						font-size: 28rpx;
					}
				}
			}
		}
		.creditview{
			position: relative;
			.creditbg{
				width: 100%;
			}
			.creditinfo{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 30rpx;
				right: 30rpx;
				margin: auto;
				.credit{
					font-size: 50rpx;
					color: white;
					.credittip{
						color: rgba(255, 255, 255, .5);
						font-size: 26rpx;
						image{
							margin-right: 10rpx;
							width: 19rpx;
							height: 23rpx;
						}
					}
				}
				
			}
		}
		.money{
			margin-left: auto;
			font-weight: normal;
			font-size: 30rpx;
			color: gray;
			text{
				color: #2A89F8;
				font-weight: bold;
			}
		}
		.statview{
			justify-content: space-between;
			.statitem{
				color: gray;
				font-size: 28rpx;
				text-align: center;
				text{
					font-size: 40rpx;
					color: black;
					display: block;
					margin-bottom: 10rpx;
				}
			}
		}
		.qrview{
			position: relative;
			image{
				width: 100%;
				display: block;
			}
			.qrtxt{
				position: absolute;
				left: 0;
				width: 80%;
				text-align: center;
				top: 0;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #9F5229;
				font-size: 40rpx;
			}
		}
		.menuview{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			.menuitem{
				font-size: 28rpx;	
				text-align: center;
				image{
					width: 60rpx;
					height: 60rpx;
					display: block;
					margin: 0 auto 10rpx;
				}
			}
		}
		.logout{
			text-align: center;
			font-size: 30rpx;
			color: gray;
			margin-top: 100rpx;
		}
	}
</style>